<!doctype html>
<html lang="en">
  <head>
    <%= htmlWebpackPlugin.options.tags.head %>

    <!-- 导入Swiper的css文件 -->
    <link rel="stylesheet" href="./css/swiper/swiper-bundle.min.css" />
    <!-- 页面css -->
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <div class="page dddec d">
      <header class="page-header page-header-primary">
        <div class="page-header-nav transparent">
          <div class="header-nav-left mine-open">
            <img class="user-photo" src="./images/user_photo.png" alt="" srcset="" />
          </div>
          <div class="header-nav-title">
            <h2 class="flex-1 font-size-big font-weight-bold text-align-center">inballbeat</h2>
          </div>
          <div class="header-nav-right">
            <img class="download-icon" src="./images/download_icon.png" alt="" srcset="" />
          </div>
        </div>
        <%= htmlWebpackPlugin.options.tags.tabNav %>
      </header>
      <!-- 内容主体 -->
      <main class="page-main">
        <div class="container margin-top-10">
          <!-- 比赛导航 -->
          <div class="row">
            <div class="main-box flex-order-1">
              <div class="flex game-nav-box">
                <!-- 列表 -->
                <div class="flex-1 game-nav-list no-select swiper" data-start="0">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <div class="flex-column game-nav-item game-nav-item-end" data-ball_type="1">
                        <div class="justify-between align-center margin-bottom-10">
                          <h6 class="font-weight-bold margin-0 text-nowrap game-nav-time">02,Apr. 09:50</h6>
                          <div class="flex-1 justify-end margin-left-5">
                            <span class="flex-1 width-0 text-align-right text-color-secondary text-ellipsis game-nav-type">SH</span>
                            <span class="text-nowrap game-nav-status">end</span>
                          </div>
                        </div>
                        <div class="align-center justify-between game-nav-link game-nav-link-less">
                          <div class="align-center content-box">
                            <img class="margin-right-10 game-nav-img" src="./images/ball_park.png" alt="" />
                            <a class="text-ellipsis game-nav-name" href="gameDetails.html">Chelsea</a>
                          </div>
                          <div class="game-nav-score">0</div>
                        </div>
                        <div class="align-center justify-between game-nav-link game-nav-link-more">
                          <div class="align-center content-box">
                            <img class="margin-right-10 game-nav-img" src="./images/shanghai_sipg_football_club.png" alt="" />
                            <a class="text-ellipsis game-nav-name" href="gameDetails.html">Manchester United</a>
                          </div>
                          <div class="game-nav-score">1</div>
                        </div>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="flex-column game-nav-item game-nav-item-active" data-ball_type="1">
                        <div class="justify-between align-center margin-bottom-10">
                          <h6 class="font-weight-bold margin-0 text-nowrap game-nav-time">02,Apr. 09:50</h6>
                          <div class="flex-1 justify-end margin-left-5">
                            <span class="flex-1 width-0 text-align-right text-color-secondary text-ellipsis game-nav-type">SH</span>
                            <span class="text-nowrap game-nav-status">end</span>
                          </div>
                        </div>
                        <div class="align-center justify-between game-nav-link game-nav-link-less">
                          <div class="align-center content-box">
                            <img class="margin-right-10 game-nav-img" src="./images/ball_park.png" alt="" />
                            <a class="text-ellipsis game-nav-name" href="gameDetails.html">Chelsea</a>
                          </div>
                          <div class="game-nav-score">0</div>
                        </div>
                        <div class="align-center justify-between game-nav-link game-nav-link-more">
                          <div class="align-center content-box">
                            <img class="margin-right-10 game-nav-img" src="./images/shanghai_sipg_football_club.png" alt="" />
                            <a class="text-ellipsis game-nav-name" href="gameDetails.html">Manchester United</a>
                          </div>
                          <div class="game-nav-score">1</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="margin-bottom-10 flex-column flex-gap-10"><%= htmlWebpackPlugin.options.tags.news %></div>
        </div>
      </main>

      <!-- 页面底部tabBar -->
      <footer class="page-footer"><%= htmlWebpackPlugin.options.tags.tabBar %></footer>

      <%= htmlWebpackPlugin.options.tags.mine %>
    </div>

    <%= htmlWebpackPlugin.options.tags.foot %>
    <script src="./js/index.js"></script>
  </body>
</html>
